<template>
  <div>
    <a-card>
      <a-space>
        <a-input
          v-model:value="listQuery.userId"
          placeholder="输入工号搜索"
          allow-clear
          @keyup.enter="handleFilter"
        />
        <a-select
          v-model:value="listQuery.status"
          allow-clear
          :options="[
            { label: '正常', value: 'NORMAL' },
            { label: '异常待处理', value: 'PENDING' },
            { label: '异常待审批', value: 'PROCESSING' },
            { label: '异常驳回', value: 'REJECT' },
            { label: '异常通过', value: 'PASSED' },
          ]"
          placeholder="状态"
          style="width: 120px"
          @change="handleFilter"
        />
        <a-date-picker
          v-model:value="listQuery.startDate"
          valueFormat="YYYY-MM-DD"
          placeholder="选择开始时间"
          allow-clear
        />
        <a-date-picker
          v-model:value="listQuery.endDate"
          valueFormat="YYYY-MM-DD"
          placeholder="选择结束时间"
          allow-clear
        />
        <a-button type="primary" :icon="h(SearchOutlined)" @click="handleFilter">搜索</a-button>
        <a-button :icon="h(UndoOutlined)" @click="handleReset">重置</a-button>
      </a-space>
    </a-card>
    <a-card class="mt-2">
      <a-table
        bordered
        :columns="columns"
        :data-source="data"
        :pagination="pagination"
        :loading="tableLoading"
        :row-key="(row) => row.id + ''"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'statusLabel'">
            <a-tag v-if="record.status === AttendStatusEnum.NORMAL" color="success">
              {{ record.statusLabel }}
            </a-tag>
            <a-tag v-else-if="record.status === AttendStatusEnum.PROCESSING" color="processing">
              <template #icon>
                <sync-outlined :spin="true" />
              </template>
              {{ record.statusLabel }}
            </a-tag>
            <a-tag v-else color="error">
              {{ record.statusLabel }}
            </a-tag>
          </template>
          <template v-if="column.dataIndex === 'actions'">
            <a-button
              v-if="record.status === AttendStatusEnum.PROCESSING"
              size="small"
              type="link"
              @click="handleOpen(record)"
            >
              审批
            </a-button>
          </template>
        </template>
      </a-table>
      <a-modal v-model:open="open" title="审批">
        <a-descriptions bordered :column="2" class="pt-1">
          <a-descriptions-item label="异常类型">{{ record.typeLabel }}</a-descriptions-item>
          <a-descriptions-item label="异常说明">{{ record.remark }}</a-descriptions-item>
          <a-descriptions-item label="签到时间">{{ record.signTime }}</a-descriptions-item>
          <a-descriptions-item label="签退时间">{{ record.exitTime }}</a-descriptions-item>
          <a-descriptions-item label="证明附件">
            <a-image
              v-if="record.snapshot"
              :width="120"
              :src="baseURL + record.snapshot"
              fallback=""
            />
          </a-descriptions-item>
        </a-descriptions>
        <template #footer>
          <a-button key="back" danger @click="handleProcess(record, false)">拒绝</a-button>
          <a-button key="submit" type="primary" @click="handleProcess(record, true)">通过</a-button>
        </template>
      </a-modal>
    </a-card>
  </div>
</template>

<script setup lang="ts">
  import { h, onMounted, reactive, ref } from 'vue';
  import AttendanceApi from '@/api/AttendanceApi';
  import { SearchOutlined, UndoOutlined, SyncOutlined } from '@ant-design/icons-vue';
  import { resetReactive } from '@/utils';
  import { timeIntervalWord } from '@/utils/DateUtil';
  import { message, Modal } from 'ant-design-vue';

  const baseURL = import.meta.env.VITE_BASE_API;

  enum AttendStatusEnum {
    NORMAL = 'NORMAL',
    PENDING = 'PENDING',
    PROCESSING = 'PROCESSING',
    REJECT = 'REJECT',
    PASSED = 'PASSED',
  }

  const columns = [
    { title: '工号', dataIndex: 'userId' },
    { title: '姓名', dataIndex: 'nickname' },
    { title: '日期', dataIndex: 'signDate' },
    { title: '签到时间', dataIndex: 'signTime' },
    { title: '签退时间', dataIndex: 'exitTime' },
    { title: '工时', dataIndex: 'timeInterval', width: 120 },
    { title: '状态', dataIndex: 'statusLabel', align: 'center', width: 120 },
    {
      title: '操作',
      dataIndex: 'actions',
      align: 'center',
      width: 130,
    },
  ];
  let data = ref([]);
  const pagination = reactive({
    current: 1,
    pageSize: 10,
    total: 0,
    onChange: (current: number) => {
      pagination.current = current;
      getList();
    },
  });
  onMounted(() => {
    getList();
  });

  const listQuery = reactive<any>({});

  const tableLoading = ref(false);

  function getList() {
    tableLoading.value = true;
    AttendanceApi.page({ index: pagination.current, size: pagination.pageSize, ...listQuery })
      .then((res) => {
        data.value = res.data.map((i) => {
          i.timeInterval = timeIntervalWord(
            `${i.signDate} ${i.signTime}`,
            `${i.signDate} ${i.exitTime || i.signTime}`
          );
          return i;
        });
        pagination.total = res.total;
      })
      .finally(() => (tableLoading.value = false));
  }

  function handleFilter() {
    pagination.current = 1;
    getList();
  }

  function handleReset() {
    resetReactive(listQuery);
    handleFilter();
  }

  const open = ref(false);
  const record = ref({});

  function handleOpen(row) {
    open.value = true;
    record.value = row;
  }

  function handleProcess(row, passed) {
    Modal.confirm({
      title: '提示',
      content: `确定${passed ? '通过' : '拒绝'}这条考勤记录吗`,
      okType: passed ? 'primary' : 'danger',
      onOk: () => {
        AttendanceApi.update({
          ...row,
          status: passed ? AttendStatusEnum.PASSED : AttendStatusEnum.REJECT,
        }).then(() => {
          message.success('操作成功');
          open.value = false;
          getList();
        });
      },
      onCancel: () => {},
    });
  }
</script>

<style scoped></style>
